<template>
	<view class="goods-box">
		<NavBar title="编辑商品"/>
		<view class="release-goods">
			<uni-forms ref="formRef" :rules="rules" :model="goodsInfo">
				<view class="goods-info">
					<uni-forms-item name="name">
						<view class="item">
							<view class="label"> 名称 </view>
							<uni-easyinput class="easy-input" v-model="goodsInfo.name" placeholder="请输入产品名称" placeholderStyle="color: #D8D8D8;" :input-border="false" :clearable="false" />
						</view>
					</uni-forms-item>
					<uni-forms-item name="show_num">
						<view class="item">
							<view class="label"> 显示数量 </view>
							<uni-easyinput type="number" class="easy-input" v-model="goodsInfo.show_num" placeholder="请输入显示数量" placeholderStyle="color: #D8D8D8;" :input-border="false" :clearable="false" />
						</view>
					</uni-forms-item>
					<uni-forms-item name="restrict_num">
						<view class="item">
							<view class="label"> 起售数量 </view>
							<uni-easyinput type="number" class="easy-input" v-model="goodsInfo.restrict_num" placeholder="多少份起卖，0表示不限购" placeholderStyle="color: #D8D8D8;" :input-border="false" :clearable="false" />
						</view>
					</uni-forms-item>
					<uni-forms-item name="restrict_num_max">
						<view class="item">
							<view class="label"> 每单限购 </view>
							<uni-easyinput type="number" class="easy-input" v-model="goodsInfo.restrict_num_max" placeholder="每单最多可购买份量，0表示不限购" placeholderStyle="color: #D8D8D8;" :input-border="false" :clearable="false" />
						</view>
					</uni-forms-item>
					<uni-forms-item name="dabao_money">
						<view class="item">
							<view class="label"> 其他费用 </view>
							<uni-easyinput type="number" class="easy-input" v-model="goodsInfo.dabao_money" placeholder="请填写其他费用" placeholderStyle="color: #D8D8D8;" :input-border="false" :clearable="false" />
						</view>
					</uni-forms-item>
					<uni-forms-item name="sort">
						<view class="item">
							<view class="label"> 序号 </view>
							<uni-easyinput type="number" class="easy-input" v-model="goodsInfo.sort" placeholder="用于排序，越大越靠前" placeholderStyle="color: #D8D8D8;" :input-border="false" :clearable="false" />
						</view>
					</uni-forms-item>
				</view>
				<view class="goods-chart">
					<uni-forms-item name="img">
						<view class="title"> 主图 </view>
						<view class="img-box">
							<ChooseBtn @choose="chooseImg" v-if="imgUrl==''" />
							<view class="img" v-else>
								<image :src="imgUrl" class="chart" />
								<image src="/static/icon/shop/close-img.png" class="close" @tap="delImg()" />
							</view>
						</view>
						<view class="tips"> 支持jpg格式 </view>
					</uni-forms-item>	
				</view>
				<SetSpec ref="speceRef" :specList="goodsInfo.sku_details" />
				<!-- <view class="goods-desc">
					<uni-forms-item name="detail">
						<view class="title"> 详情 </view>
						<textarea v-model="goodsInfo.detail" placeholder="设置为空时，前台则不显示，输入详情介绍" />
					</uni-forms-item>	
				</view> -->
				<view class="goods-status">
					<view class="item">
						<view class="label"> 状态 </view>
						<view class="value" @tap="goodsStatusRef.open()">
							<text>{{activeName}}</text>
							<image src="/static/icon/order/right.png" class="v-img"/> 
						</view>
					</view>
				</view>
			</uni-forms>
			<view class="btn-box">
				<view class="btn" @tap="submit"> 确定 </view>
			</view>
			<SelStatus ref="goodsStatusRef" :arr="['上架', '下架']" @selected="selGoodsStatus" />
		</view>
	</view>
</template>

<script setup>
	import { ref, computed, onUnmounted } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import NavBar from '@/components/NavBar.vue'
	import SetSpec from './components/SetSpec.vue'
	import SelTime from '@/components/SelectTime.vue'
	import SelStatus from '@/components/BottomSelectPopup.vue'
	import ChooseBtn from '@/components/ChooseBtn.vue'
	import Picker from '@/components/Picker.vue'
	import { isNull, isMobile } from '@/utils/valdate.js'
	import { EditGoodsApi } from '@/service/shop.js'
	const formRef = ref()
	const speceRef = ref()
	const goodsStatusRef = ref()
	const goodsInfo = ref({
		name: "", //名称
		category_id: "", //规格ID
		show_num: "",
		restrict_num: '', //起售数量
		restrict_num_max: '', //每单限购
		dabao_money: '', //其他费用
		express_money: '', //快递费(UI上没有需要加上)
		sort: '', //序号
		msg: "", //描述
		img: '', //主图
		imgs: '', //轮播图"992,835,790"
		video: '', //视频
		detail: "", //详情(富文本形式)
		active: 1, //状态 1=上架 0 =下架
		label: "", //关键词 关键字1,关键字2,关键词3
		sku_details: { //规格
		},
		start_time: '',
		over_time: ''
	})
	const imgUrl = ref('') // 此字段仅供展示 主图
	const activeName = ref('上架') // 此字段仅供展示
	const rules = {
		name: isNull('名称'),
		category_id: isNull('类别'),
		show_num: isNull('显示数量'),
		restrict_num: isNull('起售数量'),
		restrict_num_max: isNull('每单限购'),
		dabao_money: isNull('其他费用'),
		sort: isNull('序号'),
		msg: isNull('描述'),
		img: isNull('主图'),
		video: isNull('视频'),
		detail: isNull('详情'),
		label: isNull('关键词'),
		start_time: isNull('时间')
	}
	// 选择主图
	const chooseImg = (e) => {
		imgUrl.value = e.img_url
		goodsInfo.value.img = e.id
	}
	const delImg = (type) => {
		imgUrl.value = ''
		goodsInfo.value.img = ''
 	}
	// 选择状态 1=上架 0 =下架
	const selGoodsStatus = (e) => {
		activeName.value = e
		if(e =='上架') {
			goodsInfo.value.active = 1
		} else {
			goodsInfo.value.active = 0
		}
		goodsStatusRef.value.close()
	}
	const submit = () => {
		const { id, name, category_id, show_num, restrict_num, restrict_num_max, dabao_money, express_money, sort, msg, img, imgs, video, detail, active, sku_details } = goodsInfo.value
		const params = {
			id,
			name,
			category_id,
			show_num,
			restrict_num,
			restrict_num_max,
			dabao_money,
			express_money,
			sort,
			msg,
			img,
			imgs,
			video,
			detail,
			active,
			sku_details: {
				item: sku_details
			} //规格
		}
		formRef.value.validate().then(() => {
			EditGoodsApi(params).then(res => {
				uni.navigateBack()
			})
		})
	}
	onLoad((e) => {
		const { info } = e
		goodsInfo.value = JSON.parse(info)
		imgUrl.value = goodsInfo.value.img
		console.log(goodsInfo.value);
	})
</script>

<style scoped lang="scss">
	.release-goods {
		padding: 10px 12px 70px;
		box-sizing: border-box;
		.goods-info {
			padding: 0 12px;
			margin-bottom: 10px;
			border-radius: 10px;
			background-color: #fff;
			.uni-forms-item {
				margin-bottom: 0;
				align-items: center;
				height: 50px;
				border-bottom: 1px solid #eeeeee;
				box-sizing: border-box;
				&:nth-last-of-type(1) {
					border-bottom: none;
				}
				.item {
					height: 50px;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					.label {
						color: #333333;
						font-size: 16px;
						font-weight: 400;
						margin-right: 10px;
					}
					.value {
						flex: 1;
						display: flex;
						margin-left: 10px;
						padding-right: 10px;
						align-items: center;
						justify-content: end;
						.text {
							color: #D8D8D8;
							font-size: 14px;
							font-weight: 400;
							&.a-text {
								color: #333333;
							}
						}
						.right {
							width: 14px;
							height: 14px;
							margin-left: 5px;
						}
					}
					.easy-input {
						flex: 1;
						color: #D8D8D8;
						font-size: 14px;
						font-weight: 400;
						text-align: right;
						margin-left: 10px;
					}
				}
			}
			:deep(.uni-forms-item__error) {
				left: 0;
				top: 100%;
				right: 12px;
				font-size: 12px;
				text-align: right;
				padding-bottom: 3px;
				transform: translateY(-100%);
			}
			.goods-item {
				height: 50px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #EEEEEE;
				&:nth-last-of-type(1) {
					border-bottom: none;
				}
				.label {
					width: 64px;
					color: #333333;
					font-size: 16px;
					font-weight: 400;
				}
				.value {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: end;
					color: #D8D8D8;
					font-size: 14px;
					font-weight: 400;
					margin-left: 20px;
					text-align: right;
					.placeCss {
						color: #D8D8D8;
						font-size: 14px;
					}
					.right {
						width: 14px;
						height: 14px;
					}
				}
			}
		}
		.shop-desc {
			padding: 16px;
			border-radius: 10px;
			margin-bottom: 10px;
			background-color: #fff;
			.uni-forms-item {
				margin-bottom: 0;
			}
			.title {
				color: #333333;
				font-size: 16px;
				font-weight: 400;
				line-height: 20px;
				margin-bottom: 5px;
			}
			textarea {
				width: 100%;
				height: 120px;
				color: #333333;
				font-size: 14px;
				font-weight: 400;
				line-height: 20px;
			}
		}
		.goods-chart, .goods-video {
			border-radius: 10px;
			margin-bottom: 10px;
			background-color: #fff;
			padding: 20px 16px 11px;
			.uni-forms-item {
				margin-bottom: 0;
			}
			.title {
				color: #333333;
				font-size: 16px;
				font-weight: 400;
				line-height: 20px;
				margin-bottom: 15px;
			}
			.img-box {
				margin-bottom: 10px;
				display: grid;
				grid-gap: 20px 0;
				grid-template-columns: repeat(3, 1fr);
				.img {
					width: 74px;
					height: 74px;
					position: relative;
					display: inline-block;
					.chart, .video {
						width: 74px;
						height: 74px;
						border-radius: 10px;
					}
					.close {
						width: 18px;
						height: 18px;
						position: absolute;
						right: 0;
						top: 0;
					}
				}
			}
			.tips {
				color: #AAAAAA;
				font-size: 12px;
				font-weight: 400;
				line-height: 20px;
			}
		}
		.goods-desc {
			padding: 16px;
			margin: 10px 0;
			border-radius: 10px;
			background-color: #fff;
			.uni-forms-item {
				margin-bottom: 0;
			}
			.title {
				color: #333333;
				font-size: 16px;
				font-weight: 400;
				line-height: 20px;
				margin-bottom: 5px;
			}
			textarea {
				width: 100%;
				height: 122px;
				color: #333333;
				font-size: 14px;
				font-weight: 400;
				line-height: 20px;
			}
		}
		.goods-status {
			padding: 0 12px;
			border-radius: 10px;
			margin-top: 10px;
			background-color: #fff;
			.item {
				height: 50px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				// &:nth-of-type(1) {
				// 	border-bottom: 1px solid #EEEEEE;
				// 	box-sizing: border-box;
				// }
				.label {
					color: #333333;
					font-size: 14px;
					font-weight: 400;
				}
				.value {
					display: flex;
					align-items: center;
					color: #666666;
					font-size: 14px;
					font-weight: 400;
					.v-img {
						width: 14px;
						height: 14px;
						margin-left: 6px;
					}
				}
			}
		}
		.goods-keyword {
			border-radius: 10px;
			padding: 0 12px 10px;
			background-color: #fff;
			.uni-forms-item {
				margin-bottom: 0;
			}
			.title {
				height: 50px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #EEEEEE;
				.name {
					color: #333333;
					font-size: 14px;
					font-weight: 400;
				}
			}
			.keyword-box {
				padding: 10px 4px 0;
				display: grid;
				gap: 10px 9px;
				grid-template-columns: repeat(4, 1fr);
				.keyword-item {
					width: 100%;
					height: 24px;
					color: #555555;
					font-size: 11px;
					font-weight: 400;
					line-height: 24px;
					text-align: center;
					border: 1px solid #AAAAAA;
					box-sizing: border-box;
				}
			}
			.num {
				color: #C4C4C4;
				font-size: 14px;
				font-weight: 400;
				line-height: 20px;
				text-align: right;
			}
		}
		.btn-box {
			position: fixed;
			bottom: 0;
			left: 0px;
			right: 0px;
			padding: 0 12px 10px;
			background-color: #F4F5F7;
			.btn {
				height: 50px;
				color: #FFFFFF;
				line-height: 50px;
				text-align: center;
				background: #FF3B1E;
				border-radius: 106px 106px 106px 106px;
			}
		}
	}
</style>
